<template>
  <div>
      <div class="header">
        <mt-header class="title" :title="this.$route.name" fixed>
          <router-link :to="getPath" slot="left" v-if="this.$route.name!='首页'">
            <mt-button icon="back">返回</mt-button>
          </router-link>
          <mt-button icon="more" slot="right" v-if="this.$route.name!='首页'"></mt-button>
        </mt-header>
      </div>

      <keep-alive>
        <router-view></router-view>
      </keep-alive>


      <div class="footer">
        <mt-tabbar fixed>
          <mt-tab-item id="home">
            <router-link to='/'>
              <i class="iconfont icon-shouye"></i><span class="menu">首页</span>
            </router-link>
          </mt-tab-item>
          <mt-tab-item id="news">
            <router-link to='/news'>
              <i class="iconfont icon-xinwen"></i><span class="menu">新闻</span>
            </router-link>
          </mt-tab-item>
          <mt-tab-item id="goods">
            <router-link to="/goods">
              <i class="iconfont icon-chanpin"></i><span class="menu">产品</span>
            </router-link>
          </mt-tab-item>
          <mt-tab-item id="/carts">
            <router-link to="carts"><i class="iconfont icon-gouwuche"></i><span class="menu">购物车</span>
            </router-link>
          </mt-tab-item>
          <mt-tab-item id="my">
            <router-link to="/myself">
              <i class="iconfont icon-wode"></i><span class="menu">我的</span>
            </router-link>
          </mt-tab-item>
        </mt-tabbar>
      </div>

  </div>

</template>

<script>

import {mapGetters} from "vuex";
import {mapActions} from "vuex"

export default {
  data () {
    return {

    }
  },
  methods:{
    ...mapActions(["setPath"])
  },
  computed:{
    ...mapGetters(["getPath"])
  },
  created(){

  },
  watch:{
    '$route'(to,from){
        this.setPath(from.path);
    }
  }
}
</script>

<style>
  .clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .left{
    float: left;
  }
  .right{
    float: right;
  }
  *{
    margin: 0;
    padding: 0;
  }
  body{
    background:	#F5F5DC;
    /* background:url("./img/bg.jpg") */
  }
  .header{
    height:3rem
  }
  .title{
    font-size: 1.5rem;
    height:3rem
  }
  .iconfont{
    font-size:1.8rem;
  }
  .menu{
    display: block;
    margin-top: 0.3rem;
    font-size: 1.3rem
  }
  a{
    text-decoration: none;
    color: 	#212121;
  }
  .router-link-exact-active{
    color:#1C86EE;
  }
  .footer{
    height:4.2rem
  }
</style>
